<template>
  <div>
    <!-- 、搜索栏 -->
    <el-card style="margin: 15px">
      <el-row v-if="subjectID" slot="header">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>学科管理</el-breadcrumb-item>
          <el-breadcrumb-item>{{ $route.query.params }}</el-breadcrumb-item>
          <el-breadcrumb-item>目录管理</el-breadcrumb-item>
        </el-breadcrumb>
      </el-row>
      <el-form :model="formData" :inline="true">
        <el-row type="flex" justify="space-between">
          <el-col :span="16">
            <el-form-item label="目录名称">
              <el-input v-model="formData.directoryName" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :pull="3">
            <el-form-item label="状态" class="sousuo">
              <el-select
                v-model="formData.state"
                placeholder="请选择"
                style="margin-right: 10px"
              >
                <el-option label="启用" :value="1" />
                <el-option label="禁用" :value="0" />
              </el-select>
              <el-button @click="btnClear">清除</el-button>
              <el-button type="primary" @click="btnSearch">搜索</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="14" :push="4">
            <el-form-item class="el-form-item__content">
              <el-button
                v-if="subjectID"
                type="text"
                icon="el-icon-back"
                @click="$router.back()"
              >
                返回学科
              </el-button>
              <el-button
                type="success"
                size="small"
                icon="el-icon-edit"
                @click="addDirectoryList"
              >
                新增目录
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 总数 -->
      <el-alert
        :title="'数据一共' + title + '条'"
        type="info"
        :closable="false"
        show-icon
      />
      <!-- 主页面 -->
      <template>
        <el-table
          :data="list"
          :v-loading="loading"
          style="width: 100%"
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
          :fit="true"
        >
          <el-table-column prop="id" type="index" label="序号" />
          <el-table-column prop="subjectName" label="所属学科" />
          <el-table-column prop="directoryName" label="目录名称" />
          <el-table-column prop="username" label="创建者" />
          <el-table-column prop="addDate" label="创建日期">
            <!-- 作用域插槽 -->
            <template v-slot="{ row }">
              {{ row.addDate | formatDate }}
            </template>
          </el-table-column>
          <el-table-column prop="totals" label="面试题数量" width="160" />
          <el-table-column prop="state" label="状态" width="80">
            <template v-slot="{ row }">
              <span v-if="row.state">启用</span>
              <span v-else>禁用</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="290">
            <template v-slot="{ row }">
              <el-button
                v-if="row.state"
                type="text"
                @click="btnChangeState(row)"
              >
                禁用
              </el-button>
              <el-button v-else type="text" @click="btnChangeState(row)">
                启用
              </el-button>
              <el-button v-if="row.state" type="text" @click="btnEdit(row.id)">
                修改
              </el-button>
              <el-button v-else type="text" disabled @click="btnEdit(row.id)">
                修改
              </el-button>
              <el-button
                v-if="row.state"
                type="text"
                @click="deleteDirectory(row.id)"
              >
                删除
              </el-button>
              <el-button
                v-else
                type="text"
                disabled
                @click="deleteDirectory(row.id)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row
          type="flex"
          justify="center"
          align="middle"
          style="height: 60px"
        >
          <el-pagination
            background
            layout="prev, pager, next"
            :page-size="page.pagesize"
            :current-page="page.page"
            :total="page.total"
            @current-change="changePage"
          />
        </el-row>
      </template>
    </el-card>
    <!-- 弹窗 -->
    <catalogue-app ref="directoryRef" :show-dialog.sync="showDialog" />
  </div>
</template>

<script>
import {
  getDirectoryList,
  deleteDirectoryList,
  getDirectoryState
} from '@/api/user'
import catalogueApp from './catalogue-app'
export default {
  components: {
    catalogueApp
  },
  data() {
    return {
      subjectID: this.$route.query.id,
      list: [],
      page: {
        page: 1,
        pagesize: 10,
        total: 0
      },
      addForm: {
        id: '',
        creator: '',
        addDate: '',
        totals: '',
        state: '',
        subjectID: '', // 学科ID
        directoryName: '' // 目录名称
      },
      formData: {
        directoryName: '', // 目录名称
        state: null
      },
      loading: false,
      title: '',
      showDialog: false
    }
  },
  created() {
    this.getDirectoryList()
  },
  methods: {
    // 换页
    changePage(newPage) {
      this.page.page = newPage
      this.getDirectoryList()
    },
    // 获取学科目录
    async getDirectoryList() {
      // console.log(123);
      this.loading = true
      if (this.subjectID) {
        const data = await getDirectoryList({
          ...this.page,
          subjectID: this.subjectID
        })
        console.log(data)
        this.list = data.items
        this.page.total = data.counts
        this.title = this.page.total
        this.loading = false
      } else {
        const { data } = await getDirectoryList(this.page)
        // console.log(data)
        this.list = data.items
        this.page.total = data.counts
        this.title = this.page.total
        this.loading = false
      }
    },
    // 删除学科
    async deleteDirectory(id) {
      try {
        await this.$confirm('是否确定删除？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        })
        await deleteDirectoryList(id)
        this.getDirectoryList()
        const h = this.$createElement
        this.$notify({
          title: '提示',
          message: h('i', { style: 'color: black' }, '删除成功')
        })
      } catch (err) {
        console.log(err)
      }
    },
    // 新增目录
    addDirectoryList() {
      this.showDialog = true
    },
    // 修改目录
    async btnEdit(id) {
      await this.$refs.directoryRef.getDisciplineMessage(id)
      // console.log(this.$refs.directoryRef)
      this.showDialog = true
    },
    // 设置禁用
    async btnChangeState(data) {
      try {
        if (data.state === 1) {
          this.$message.success('操作成功')
          data.state = data.state ? 0 : 1
          await getDirectoryState(data.id, data.state)
          console.log(data.id, data.state)
        } else {
          this.$message.success('操作成功')
          data.state = data.state ? 0 : 1
          await getDirectoryState(data.id, data.state)
          console.log(data.id, data.state)
        }
      } catch (err) {
        console.log(err)
      }
    },
    // 搜索目录
    async btnSearch() {
      this.loading = true
      const res = { ...this.formData, ...this.page }
      // console.log(res)
      const { data } = await getDirectoryList(res)
      // console.log(data)
      this.loading = true
      this.list = data.items
      this.page.total = data.counts
      this.loading = false
    },
    // 清空搜索项
    btnClear() {
      this.formData = {
        directoryName: '', // 目录名称
        state: null
      }
      this.getDirectoryList()
      const h = this.$createElement
      this.$notify({
        title: '提示',
        message: h('i', { style: 'color: black' }, '已清空')
      })
    }
  }
}
</script>
<style scoped>
.sousuo {
  margin-left: 65px;
}
div /deep/ .el-breadcrumb__inner {
  color: black;
}
</style>
